<template>
  <div class="login"
  :style="{'minHeight':winHei+'px'}">

    <div class="logo">
      <img src="@/assets/img/login/logo.png" alt="">
    </div>

    <ul class="btnBar">
      <li
      v-for="(btnBar_It,btnBar_idx) in btnBar"
      :class="{'btnBarAc':btnBarIdx==btnBar_idx}"
      @click="btnBarItemFn(btnBar_idx)">
        <span>
          {{btnBar_It}}
        </span>
      </li>
    </ul>

    <div class="beizhu">
      <span>
        注意：现在网上出现和系统界面一样的钓鱼软件，请确认您的软件下载渠道以及软件服务商、快递服务商、请确认他们的身份，谨防上当受骗！
      </span>
    </div>

    <div class="foemBoxBg">
      <ul class="formBox">

        <li>
          <div class="t">
            <b>*</b>
            <span>
              账号
            </span>
          </div>
          <div class="b">
            <input type="text" v-model="u_account">
          </div>
        </li>


        <li>
          <div class="t">
            <b>*</b>
            <span>
              密码
            </span>
          </div>
          <div class="b pwdInp">
            <input v-if="!u_pwd_see" type="password" v-model="u_pwd">
            <input v-else type="text" v-model="u_pwd">
            <div @click="setVal('u_pwd_see')" class="seeBox">
              <img v-show="!u_pwd_see" src="@/assets/img/login/see.png" alt="">
              <img v-show="u_pwd_see" src="@/assets/img/login/no_see.png" alt="">
            </div>
          </div>
        </li>

        <li>
          <div @click="loginBtn" class="loginBtn">
            登录
          </div>
        </li>

      </ul>

      <ul v-show="btnBarIdx==0" class="txtBtn">
        <li>
          <!-- <span>
            获取识别码
          </span> -->
          <span @click="goPage('/register')">
            没有账号？
          </span>
        </li>
        <li>
          <span @click="set_popBg(true)">
            什么原因可能造成登录失败
          </span>
        </li>
      </ul>

    </div>

    <div v-if="is_popBg" class="maskBg">

      <dl class="popBg">
        <dt>
          <div class="closeBtn" @click="set_popBg(false)">&times</div>
          <ul class="popDt">

            <li>
              1:页面出现fetch error 的错误。 当地网络问题 解决方案。 http://help.163.com/12/0830/17/8A63DUT700752DML.html。dns列表https://www.jianshu.com/p/55b5050322c7
            </li>

            <li>
              2:出现Unexpected token JSON类型的错误<br/>
              1）数据异常 解决方案:卸载客户端重新安装。<br/>
               2）电脑解码错误 解决方案:尝试重启或者卸载重新安装。<br/>
               3）网络问题 解决方案:http://help.163.com/12/0830/17/8A63DUT700752DML.html。dns列表https://www.jianshu.com/p/55b5050322c7
            </li>

            <li>
              3:以上方式解决不了请联系客服
            </li>

          </ul>

        </dt>
        <dd>
          <dl>
            <dt @click="set_popBg(false)">
              OK
            </dt>
            <dd @click="set_popBg(false)">
              Cancel
            </dd>
          </dl>
        </dd>
      </dl>

    </div>

  </div>
</template>

<script>
export default {
  name: 'Login',
  data(){
    return{
      btnBar:[
        "普通版",
        "快递服务商",
        "代付服务商"
      ],
      btnBarIdx:0,
      u_account:"",
      u_pwd:"",
      u_pwd_see:false,
      is_popBg:false
    }
  },
  components: {

  },
  activated() {
    let that=this;
    // let cur_token=window.localStorage.getItem("token");
    // if(cur_token!==null){
    //   console.log("home");
    //   that.goPage('/platform/home');
    // }
    window.localStorage.setItem("itemVersion",this.$version);
    that.btnBarIdx=0;
    that.u_account="";
    that.u_pwd="";
    that.u_pwd_see=false;
    that.is_popBg=false;
  },
  methods:{
    loginBtn(){
      let that=this;
      if(that.u_account==""||that.u_pwd==""){
        if(that.u_account==""){
          that.$bus.$emit("toastEvent","请填写账号!",0);
        }else if(that.u_pwd==""){
          that.$bus.$emit("toastEvent","请填写密码!",0);
        }else{
          that.$bus.$emit("toastEvent","请把信息填写正确!",0);
        }
      }else{
        that.loginReq();
      }
    },
    loginReq(){
      let that=this;
      this.$request.post(
           `/api/user/login`,
           {
             account:that.u_account,
             password:that.u_pwd
           },
           {

           }
        ).then((res)=>{
            console.log("登录请求成功：",res);
            that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
            if(res.data.code==1){
              console.log("登录请求成功code==1");
              window.localStorage.setItem('token',res.data.data.key);
              setTimeout(()=>{
                console.log("跳转");
                that.goPage('/platform/home');
              },2500);
            }
        })
        .catch((err)=>{
          console.log("登录请求失败：",err);
        });
    },
    set_popBg(val){
      let that=this;
      that.is_popBg=val;
    },
    setVal(val){
      let that=this;
      that[val]=!that[val];
    },
    btnBarItemFn(val){
      let that=this;
      that.btnBarIdx=val;
      that.u_account="";
      that.u_pwd="";
      that.u_pwd_see=false;
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../assets/css/login.less";
</style>
